<template>
    <div class="ele-body">
        <el-card shadow="never" body-style="padding:22px 22px 0 22px;">
            <el-form :model="table.where" label-width="100px" class="ele-form-search">
                <el-row :gutter="5">
                    <el-col :md="5" :sm="12">
                        <el-form-item label="发起人姓名：">
                            <el-input v-model="table.where.name" placeholder="请输入姓名" size="small" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :md="6" :sm="12">
                        <div class="ele-form-actions">
                        <el-button type="primary" @click="$refs.table.reload()" icon="el-icon-search" class="ele-btn-icon">查询
                        </el-button>
                        <el-button @click="(table.where={})&&$refs.table.reload()">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <el-card shadow="never">
            <!-- 表格工具栏 -->
            <div class="ele-table-tool">
                <div class="ele-table-tool-left">
                    <el-button @click="addProcess" type="primary" icon="el-icon-plus" class="ele-btn-icon" size="small">添加</el-button>
                </div>
            </div>
            <!-- 数据表格 -->
            <ele-data-table ref="table" :config="table" highlight-current-row>
                <template slot-scope="{index}">
                    <el-table-column type="index" label="序号" :index="index" width="60" align="center" fixed="left" show-overflow-tooltip/>
                    <el-table-column prop="name" label="请假人" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="number" label="学号" show-overflow-tooltip min-width="110"/>

                    <el-table-column prop="leave_name" label="请假类型" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="first_time" label="初始时间" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="last_time" label="结束时间" show-overflow-tooltip min-width="110"/>

                    <el-table-column prop="num" label="请假时长" show-overflow-tooltip min-width="110"/>
                    <el-table-column prop="status" label="审批状态" show-overflow-tooltip min-width="110"/>

                    <el-table-column prop="number" label="审批流程" show-overflow-tooltip min-width="110">
                        <template slot-scope='{row}'>
                            <el-link type="success" @click="process(row)">审批流程 <i class="el-icon-info el-icon--right"></i></el-link>
                        </template>
                    </el-table-column>

                    <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip min-width="110"/>

                    <el-table-column label="操作" align="center" width="130px" :resizable="false" fixed="right">
                        <template slot-scope="scope">
                            <el-button @click="remove(scope.row)" type="danger" size="mini" class="smbtn">删除</el-button>
                        </template>
                    </el-table-column>
                </template>
            </ele-data-table>
        </el-card>

        <!-- 编辑弹窗 -->
        <el-dialog :title="editForm.id ? '修改审批流程' : '添加审批流程'" :visible.sync="showEdit" width="800px"
                :destroy-on-close="true" 
                :lock-scroll="false" 
                :close-on-click-modal="false">

           <el-form :model="editForm" ref="editForm" :rules="editRules" label-width="96px">

                <el-form-item label="流程名称:" prop="name">
                    <el-input v-model="editForm.name" placeholder="请输入流程名称" clearable/>
                </el-form-item>

                <el-row :gutter="20" class="formRow">
                    <el-col :md="10" :sm="12">
                        <el-form-item label="最小时长:" prop="device_id">
                            <el-input v-model="editForm.device_id" placeholder="请输入最小时长" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="10" :sm="12">
                        <el-form-item label="最大时长:" prop="device_id">
                            <el-input v-model="editForm.device_id" placeholder="请输入最大时长" clearable/>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <div style="color: red;padding-left: 15px;line-height: 35px;">[天]</div>
                    </el-col>
                </el-row>
    
                <el-form-item label="发起人:" prop="send_to">
                    <treeselect v-model="editForm.send_to" 
                        :multiple="true" 
                        :clearable="true" 
                        :flat="true"
                        :autoSelectDescendants="true"
                        :options="options"/>
                </el-form-item>

                <el-form-item label="审批人:" prop="device_id">
                    <el-button @click="showProject=true" icon="el-icon-plus" style="width:100%;">新增成员</el-button>                 
                </el-form-item>
        
                <el-row :gutter="15" class="formRow" v-show="showList">
                    <el-col :md="20" :offset="3">
                        <el-table :data="list" border style="width:100%;">
                            <el-table-column type="index" width="45" align="center"/>
                            <el-table-column label="审批人" prop="name" />
                            <el-table-column label="操作" width="130px" align="center" :resizable="false">
                                <template slot-scope="{$index}">
                                    <span class="ele-action">
                                        <el-link @click="onRemove($index)" slot="reference" icon="el-icon-delete" type="danger" :underline="false">删除</el-link>
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-col>
                </el-row>

                <el-form-item label="抄送人:" prop="deviceuser">
                    <el-select v-model="editForm.funtype" placeholder="请选择" clearable class="ele-fluid">
                        <el-option
                            v-for="item in send_to_list"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>

            <el-dialog 
                :title="'添加项目'" 
                :visible.sync="showProject" 
                width="800px"
                :destroy-on-close="true" 
                :lock-scroll="false" 
                :close-on-click-modal="false" 
                @close="projectModel={type: 1, auth_to_list: {}}"
                append-to-body>
                <el-form :model="projectModel" ref="projectForm" label-width="100px">
                    <el-form-item label="类型:">
                        <el-radio-group v-model="projectModel.type">
                            <el-radio :label="1">上级主管</el-radio>
                            <el-radio :label="2">指定人员</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="审批人:">
                        <el-select v-model="projectModel.auth_to" @change="changeSel($event)" placeholder="请选择" clearable class="ele-fluid">
                            <el-option
                                v-for="item in auth_to_list"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="showProject=false">取消</el-button>
                    <el-button type="primary" @click="useRow">确定</el-button>
                </div>
            </el-dialog>

            <div slot="footer">
                <el-button @click="showEdit=false">取消</el-button>
                <el-button type="primary" @click="save">保存</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

export default {
    components: { Treeselect },
    name: "LeaveProcess",
    data() {
        return {
            table: { // 表格配置
                url: '/api/attend/student/leavelog',
                where: {},
                page: true
            },
            showEdit: false,  // 是否显示表单弹窗
            editForm: {group_id: this.groupId},  // 表单数据
            begin_to_list: [], // 发起人
            send_to_list: [], // 抄送人
            showList: false, // 是否显示已选审批人列表
            list: [], // 已选择的审批人列表
            auth_to_list: [
                {id:1, name:'直接主管'},
                {id:2, name:'二级主管'},
                {id:3, name:'三级主管'},
                {id:4, name:'四级主管'},
                {id:5, name:'五级主管'},
                {id:6, name:'六级主管'},
                {id:7, name:'七级主管'},
                {id:8, name:'八级主管'},
            ],
            showProject: false,
            projectModel: {type: 1, auth_to_list: {}},
            editRules: {},


  
        options: [ {
            id: 'a',
            label: 'a',
            children: [ {
                id: 'aa',
                label: 'aa',
            }, {
                id: 'ab',
                label: 'ab',
            } ],
            }, {
            id: 'b',
            label: 'b',
            }, {
            id: 'c',
            label: 'c',
            } ],

        }
    },

    methods: {
        remove(row) {
            this.$confirm('确定要删除吗？', '提示', {type: 'warning'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.get('/api/attend/student/leavelog/delete?id=' + row.id).then(res => {
                    loading.close();
                    if (res.data.code == 200) {
                        this.$message.success(res.data.msg);
                        this.$refs.table.reload();    
                    } else {
                        loading.close();
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        save() {
            console.log(123);
        },

        useRow() {
            this.list.push(this.projectModel.auth_to_list);
            if (this.list.length > 0) {
                this.showList = true;
            } else {
                this.showList = false;
            }
            this.showProject = false;
        },

        onRemove(index) {
            this.list.splice(index, 1);
            if (this.list.length == 0) {
                this.showList = false;
            }
        },

        changeSel(e) {
            let obj = {};
            obj = this.auth_to_list.find((item) => {
                return item.id === e; // 筛选出匹配数据
            });
            this.projectModel.auth_to_list = obj;
        },

        getTree() {
            this.$http.get().then(res => {

                console.log(res);




            }).catch(e => {
                this.$message.error(e.message);
            });
        },

        addProcess() {
            this.getTree();
        }
    }
}
</script>

<style scoped>
.formRow {
    margin-bottom: 15px;
}
</style>